<template>
  <div class="container">
    <!-- 顶部居中标题 -->
    <h1 class="main-title">越南光宝智能电子仓系统</h1>
    
    <!-- 动态字符容器 -->
    <div class="chars-container">
      <span 
        class="char" 
        v-for="(char, i) in text" 
        :key="i"
        :ref="el => chars[i] = el"
      >
        {{ char }}
      </span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const text = "越南光宝智能电子仓系统";
const chars = ref([]); // 字符DOM引用
const cycle = 2000; // 动画周期(2秒)

onMounted(() => {
  // 初始化位置
  resetChars(true);
  // 启动动画循环
  setInterval(() => resetChars(), cycle);
});

// 重置字符位置（分散/聚合切换）
const resetChars = (init = false) => {
  const container = document.querySelector('.chars-container');
  const rect = container.getBoundingClientRect();
  const isGather = !init && Math.random() > 0.5; // 随机切换状态
  const charWidth = 24;
  const centerX = rect.width / 2 - (text.length * charWidth) / 2;
  const centerY = rect.height / 2;

  chars.value.forEach((el, i) => {
    if (!el) return;
    
    // 计算目标位置
    const target = isGather 
      ? { 
          x: centerX + i * charWidth, // 聚合：横向排列
          y: centerY 
        }
      : { 
          x: 50 + Math.random() * (rect.width - 100), // 分散：随机位置
          y: 150 + Math.random() * (rect.height - 300)
        };

    // 3D变换参数
    const rotateX = isGather ? 0 : (Math.random() * 60 - 30);
    const rotateY = isGather ? 0 : (Math.random() * 60 - 30);
    const duration = init ? 0 : 1.5 + Math.random(); // 初始无动画

    // 应用动画
    el.style.transition = `all ${duration}s ease`;
    el.style.left = `${target.x}px`;
    el.style.top = `${target.y}px`;
    el.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
  });
};
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: #0a101f;
  position: relative;
  overflow: hidden;
  perspective: 1000px;
}

/* 顶部标题 */
.main-title {
  margin: 0;
  padding: 40px 0;
  text-align: center;
  color: #4fc3f7;
  text-shadow: 0 0 10px rgba(79, 195, 247, 0.5);
  font-size: 28px;
}

/* 字符容器 */
.chars-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 单个字符 */
.char {
  position: absolute;
  color: #81d4fa;
  text-shadow: 0 0 8px rgba(129, 212, 250, 0.6);
  font-size: 20px;
  font-weight: 500;
  transform-style: preserve-3d;
}
</style>